<template>
	<view v-if="vipSetting.length > 0" class="vip-container">
		<!-- 背景元素 -->
		<view class="vip-bg">
			<view class="bg-grid"></view>
			<view class="bg-glow"></view>
		</view>
		
		<!-- 顶部会员信息 -->
		<view class="vip-header">
			<view class="header-content">
				<view class="user-avatar">
					<image class="avatar-image" :src="avatar"></image>
					<view class="vip-badge" v-if="vipLevel > 1">
						VIP{{vipLevel}}
					</view>
				</view>
				
				<view class="user-info">
					<view class="vip-level">
						{{vipname}}
					</view>
					
					<view class="vip-status" v-if="vipLevel > 1">
						<view class="status-item">
							<text class="status-label">到期时间</text>
							<text class="status-value">{{userinfo.dtime}}</text>
						</view>
						<view class="status-item">
							<text class="status-label">剩余天数</text>
							<text class="status-value" v-if="userinfo.dqts>=0">{{userinfo.dqts}}天</text>
							<text class="status-value expired" v-if="userinfo.dqts<0">已过期{{-userinfo.dqts}}天</text>
						</view>
					</view>
					<view class="vip-status" v-else>
						<text class="upgrade-text">立即升级，尊享会员特权</text>
					</view>
				</view>
			</view>
		</view>
		
		<!-- VIP套餐选择 -->
		<view class="vip-packages">
			<view class="section-title">
				<text class="title-text">VIP套餐</text>
				<view class="title-line"></view>
			</view>
			
			<swiper class="package-swiper" 
				@change="changeVip" 
				previous-margin="60rpx" 
				next-margin="60rpx" 
				:indicator-dots="false" 
				:autoplay="false">
				<swiper-item v-for="(item, index) in vipPackages" :key="index">
					<view class="package-card" :class="{'active': selectId === index}" @click="buyVip(item)">
						<view class="card-content">
							<view class="package-name">{{item.name}}</view>
							<view class="package-price">
								<text class="price-symbol">$</text>
								<text class="price-number">{{item.price}}</text>
							</view>
							<view class="package-duration">{{item.duration}}</view>
							<view class="buy-button">立即开通</view>
						</view>
						<view class="card-corner"></view>
					</view>
				</swiper-item>
			</swiper>
		</view>
		
		<!-- VIP特权 -->
		<view class="vip-privileges">
			<view class="section-title">
				<text class="title-text">VIP特权</text>
				<view class="title-line"></view>
			</view>
			
			<view class="privilege-grid">
				<view class="privilege-item">
					<image class="privilege-icon" :src="statics.vipTq[0]"></image>
					<view class="privilege-info">
						<view class="privilege-title">{{$t('vipcard.benefits')}}</view>
						<view class="privilege-desc">{{$t('vipcard.superPackage')}}</view>
					</view>
				</view>
				
				<view class="privilege-item">
					<image class="privilege-icon" :src="statics.vipTq[1]"></image>
					<view class="privilege-info">
						<view class="privilege-title">{{$t('vipcard.specialDiscount')}}</view>
						<view class="privilege-desc">{{$t('vipcard.memberPrice')}}</view>
					</view>
				</view>
				
				<view class="privilege-item">
					<image class="privilege-icon" :src="statics.vipTq[2]"></image>
					<view class="privilege-info">
						<view class="privilege-title">{{$t('vipcard.exclusiveOffer')}}</view>
						<view class="privilege-desc">{{$t('vipcard.freeVideos')}}</view>
					</view>
				</view>
				
				<view class="privilege-item">
					<image class="privilege-icon" :src="statics.vipTq[3]"></image>
					<view class="privilege-info">
						<view class="privilege-title">{{$t('vipcard.exclusiveAdvisor')}}</view>
						<view class="privilege-desc">{{$t('vipcard.exclusiveSearch')}}</view>
					</view>
				</view>
			</view>
		</view>
		
		<dialog-birthday 
			:showOnly="true" 
			:title="'V'+vipSetting[selectId].level +vipSetting[selectId].name + $t('vipcard.birthdayPackage')" 
			v-if="showBirthday" 
			@closed="showBirthday = false">
		</dialog-birthday>
	</view>
</template>

<script>
	import { pageTitleMixin } from '@/common/mixins.js';
	
	export default{
		mixins: [pageTitleMixin],
		data(){
			return {
				vipLevel:'',
				rankNum:290, //成长值
				selectId:0,
				vipname:'',
				showBirthday:false,
				avatar:'',
				userinfo:[],
				vipSetting:[
					{level:1,name:'普通会员',rank_need:100},
					{level:2,name:'VIP会员',rank_need:200},
				],
				vipPackages: [
					{ name: 'VIP1月会员', duration: '1个月', price: '0', months: 1, coupon: 0 },
					{ name: 'VIP3月会员', duration: '3个月', price: '0', months: 3, coupon: 0 },
					{ name: 'VIP6月会员', duration: '6个月', price: '0', months: 6, coupon: 0 },
					{ name: 'VIP12月会员', duration: '12个月', price: '0', months: 12, coupon: 0 }
				],
				moneyList: []
			}
		},
		onLoad() {
			
		},
		onShow() {
			this.ongrzlTap();
			this.getVipPackages();
		},
		computed:{
			getVipType(){
				let arr =  new Array;
				for(var a  in this.vipSetting){
					let type = 0; // 0未达到  1已达到  2当前
					if(this.vipLevel > this.vipSetting[a].level){
						type = 1;
					}else if(this.vipLevel == this.vipSetting[a].level){
						type = 2;
					}
					arr.push(type);
				}
				return arr;
			}
		},
		methods:{
			async ongrzlTap(){
				let data = {};
				data.token = uni.getStorageSync("userinfo").token;
				data.uid = uni.getStorageSync("userinfo").id;
				uni.request({
					url: this.configs.webUrl+'/api/user/index',
					data: data,
					success: res =>{
						if(res.data.code==1){
							let ionfo=res.data.data
							this.userinfo=ionfo
							this.vipLevel=ionfo.group_id
							if(this.vipLevel==1){
								this.vipname='普通会员'
							}else{
								this.vipname='VIP会员'
							}
							if(res.data.data.avatar){
									var str = res.data.data.avatar;
									if(str.indexOf("data:image") != -1){
										this.avatar='';
									}else{
										if(str.indexOf("http") != -1){
											this.avatar=res.data.data.avatar;
										}else{
											this.avatar=this.configs.imgUrl+res.data.data.avatar;
										}
									}
								}else{
									this.avatar='';
								}
						}else{
							uni.showToast({ title: res.data.msg,icon:"none" });
						}
					},
					fail: (data, code) => {
						//console.log('fail' + JSON.stringify(data));
					}
				});		
			},
			// 获取VIP套餐信息
			async getVipPackages(){
				let data = {};
				data.token = uni.getStorageSync("userinfo").token;
				data.uid = uni.getStorageSync("userinfo").id;
				uni.request({
					url: this.configs.webUrl+'/api/user/paysj',
					data: data,
					success: res =>{
						if(res.data.code==1){
							this.moneyList = res.data.data;
							// 更新VIP套餐价格
							this.updateVipPackages();
						}
					},
					fail: (data, code) => {
						//console.log('fail' + JSON.stringify(data));
					}
				});
			},
			// 更新VIP套餐价格
			updateVipPackages(){
				if(this.moneyList.length > 0){
					// 根据月份匹配价格
					this.vipPackages.forEach((vipPackage, index) => {
						const matchingItem = this.moneyList.find(item => {
							// 根据月份匹配，这里假设接口返回的数据中有月份信息
							// 如果没有，可以根据价格范围或其他逻辑匹配
							return item.num && item.num.toString().includes(vipPackage.months.toString());
						});
						if(matchingItem){
							vipPackage.price = matchingItem.coupon || '0';
							vipPackage.coupon = matchingItem.coupon || 0;
						}
					});
				}
			},
			changeVip(e){
				this.selectId = parseInt(e.detail.current);
			},
			// 购买VIP
			buyVip(vipPackage){
				if(vipPackage.price == '0' || vipPackage.price == 0){
					uni.showToast({ title: '该套餐暂不可用', icon: "none" });
					return;
				}
				
				uni.showModal({
					title: '确认购买',
					content: `确定要购买${vipPackage.duration}的${vipPackage.name}吗？价格：${vipPackage.price}元`,
					success: (res) => {
						if(res.confirm){
							this.processVipPurchase(vipPackage);
						}
					}
				});
			},
			// 处理VIP购买
			async processVipPurchase(vipPackage){
				let data = {};
				data.token = uni.getStorageSync("userinfo").token;
				data.uid = uni.getStorageSync("userinfo").id;
				data.num = vipPackage.coupon;
				
				uni.request({
					url: this.configs.webUrl+'/api/user/vipsj',
					data: data,
					success: res =>{
						if(res.data.code==1){
							uni.showModal({
								title: '购买成功',
								content: res.data.msg,
								showCancel: false,
								confirmText: '确定',
								success: function (res) {
									if (res.confirm) {
										// 刷新用户信息
										this.ongrzlTap();
									}
								}.bind(this)
							});
						}else{
							if(res.data.msg=='余额不足'){
								uni.showModal({
									title: '提示',
									content: res.data.msg,
									showCancel: true,
									confirmText: '充值',
									success: function (res) {
										if (res.confirm) {
											uni.navigateTo({
												url:"/pages/client/vipcard/recharge"
											})
										}
									}
								});
							}else{
								uni.showToast({ title: res.data.msg, icon:"none" });
							}
						}
					},
					fail: (data, code) => {
						uni.showToast({ title: '网络错误，请重试', icon:"none" });
					}
				});
			},
			vipcm(){
				uni.navigateTo({
					url:'/pages/client/vipcard/vipcm'
				})
			}
		}
	}
</script>

<style>
	/* 基础样式 */
	page {
		background: transparent;
	}
	
	/* 容器样式 */
	.vip-container {
		position: relative;
		width: 100%;
		min-height: 100vh;
		padding-bottom: 40rpx;
	}
	
	/* 背景元素 */
	.vip-bg {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background: linear-gradient(135deg, #0a0a0a 0%, #1a1a1a 100%);
		z-index: -1;
		overflow: hidden;
	}
	
	.bg-grid {
		position: absolute;
		width: 100%;
		height: 100%;
		background-image: 
			linear-gradient(rgba(255, 204, 0, 0.05) 1px, transparent 1px),
			linear-gradient(90deg, rgba(255, 204, 0, 0.05) 1px, transparent 1px);
		background-size: 40px 40px;
		opacity: 0.5;
	}
	
	.bg-glow {
		position: absolute;
		width: 300%;
		height: 300%;
		top: -100%;
		left: -100%;
		background: radial-gradient(circle, rgba(255, 204, 0, 0.05) 0%, transparent 70%);
		animation: rotate-glow 60s linear infinite;
	}
	
	@keyframes rotate-glow {
		0% { transform: rotate(0deg); }
		100% { transform: rotate(360deg); }
	}
	
	/* 顶部会员信息 */
	.vip-header {
		padding: 60rpx 30rpx 120rpx;
		background: linear-gradient(180deg, #000000 0%, rgba(0, 0, 0, 0) 100%);
		position: relative;
		z-index: 1;
	}
	
	.header-content {
		display: flex;
		align-items: center;
	}
	
	.user-avatar {
		position: relative;
		width: 120rpx;
		height: 120rpx;
		margin-right: 30rpx;
	}
	
	.avatar-image {
		width: 100%;
		height: 100%;
		border-radius: 50%;
		border: 4rpx solid rgba(255, 204, 0, 0.5);
		box-shadow: 0 0 30rpx rgba(255, 204, 0, 0.3);
	}
	
	.vip-badge {
		position: absolute;
		bottom: -10rpx;
		right: -10rpx;
		background: linear-gradient(135deg, #ffcc00, #ff9900);
		color: #000;
		font-size: 24rpx;
		font-weight: bold;
		padding: 6rpx 16rpx;
		border-radius: 20rpx;
		z-index: 2;
	}
	
	.user-info {
		flex: 1;
	}
	
	.vip-level {
		font-size: 36rpx;
		font-weight: bold;
		color: #ffcc00;
		margin-bottom: 10rpx;
	}
	
	.vip-status {
		background: rgba(30, 30, 30, 0.7);
		border-radius: 12rpx;
		padding: 16rpx;
		border: 1rpx solid rgba(255, 204, 0, 0.2);
	}
	
	.status-item {
		display: flex;
		justify-content: space-between;
		margin-bottom: 10rpx;
	}
	
	.status-item:last-child {
		margin-bottom: 0;
	}
	
	.status-label {
		font-size: 24rpx;
		color: rgba(255, 255, 255, 0.7);
	}
	
	.status-value {
		font-size: 24rpx;
		color: #ffffff;
		font-weight: 500;
	}
	
	.status-value.expired {
		color: #ff4040;
	}
	
	.upgrade-text {
		font-size: 24rpx;
		color: #ffcc00;
	}
	
	/* 标题样式 */
	.section-title {
		display: flex;
		align-items: center;
		margin-bottom: 30rpx;
		padding: 0 30rpx;
	}
	
	.title-text {
		font-size: 32rpx;
		font-weight: bold;
		color: #ffcc00;
		padding-right: 20rpx;
		background: linear-gradient(90deg, #ffcc00, #ff9900);
		-webkit-background-clip: text;
		-webkit-text-fill-color: transparent;
	}
	
	.title-line {
		flex: 1;
		height: 2rpx;
		background: linear-gradient(90deg, rgba(255, 204, 0, 0.5), transparent);
	}
	
	/* VIP套餐 */
	.vip-packages {
		margin-top: -60rpx;
		position: relative;
		z-index: 2;
		padding: 0 30rpx 40rpx;
	}
	
	.package-swiper {
		height: 360rpx;
	}
	
	.package-card {
		height: 320rpx;
		background: linear-gradient(145deg, #1a1a1a, #0d0d0d);
		border-radius: 20rpx;
		padding: 30rpx;
		box-shadow: 0 10rpx 30rpx rgba(0, 0, 0, 0.5);
		border: 1rpx solid rgba(255, 204, 0, 0.3);
		position: relative;
		overflow: hidden;
		transition: all 0.3s;
	}
	
	.package-card.active {
		border: 1rpx solid #ffcc00;
		box-shadow: 0 0 30rpx rgba(255, 204, 0, 0.3);
		transform: scale(1.02);
	}
	
	.package-card::before {
		content: '';
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 8rpx;
		background: linear-gradient(90deg, #ffcc00, #ff9900);
	}
	
	.card-content {
		height: 100%;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	}
	
	.package-name {
		font-size: 32rpx;
		font-weight: bold;
		color: #ffffff;
	}
	
	.package-price {
		display: flex;
		align-items: baseline;
	}
	
	.price-symbol {
		font-size: 36rpx;
		color: #ffcc00;
		margin-right: 10rpx;
	}
	
	.price-number {
		font-size: 60rpx;
		font-weight: bold;
		color: #ffcc00;
		line-height: 1;
	}
	
	.package-duration {
		font-size: 24rpx;
		color: rgba(255, 255, 255, 0.7);
	}
	
	.buy-button {
		width: 100%;
		height: 70rpx;
		background: linear-gradient(90deg, #ffcc00, #ff9900);
		border-radius: 35rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		color: #000000;
		font-size: 28rpx;
		font-weight: bold;
		margin-top: 20rpx;
		box-shadow: 0 8rpx 20rpx rgba(255, 204, 0, 0.3);
	}
	
	.card-corner {
		position: absolute;
		top: 0;
		right: 0;
		width: 0;
		height: 0;
		border-style: solid;
		border-width: 0 60rpx 60rpx 0;
		border-color: transparent #ffcc00 transparent transparent;
	}
	
	/* VIP特权 */
	.vip-privileges {
		padding: 0 30rpx;
	}
	
	.privilege-grid {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		gap: 20rpx;
	}
	
	.privilege-item {
		background: rgba(30, 30, 30, 0.7);
		border-radius: 16rpx;
		padding: 30rpx;
		display: flex;
		align-items: center;
		border: 1rpx solid rgba(255, 204, 0, 0.1);
	}
	
	.privilege-icon {
		width: 80rpx;
		height: 80rpx;
		margin-right: 20rpx;
	}
	
	.privilege-info {
		flex: 1;
	}
	
	.privilege-title {
		font-size: 28rpx;
		font-weight: 600;
		color: #ffffff;
		margin-bottom: 8rpx;
	}
	
	.privilege-desc {
		font-size: 24rpx;
		color: rgba(255, 255, 255, 0.6);
	}

	.vip-container {
		background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
	}
</style>